<template>
  <div
    id="networkparameters"
    class="el-main-padding"
    v-loading="loading"
  >
    <div class="my-breadcrumb-div">
      <i class="el-icon-location my-breadcrumb-icon my-breadcrumb-padding" />
      <el-breadcrumb
        class="my-breadcrumb-padding"
        separator="/"
      >
        <el-breadcrumb-item>
          <!--配置-->
          {{ $t('message.networkparameters.breadcrumb.crumb1') }}
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          <!--网络参数-->
          {{ $t('message.networkparameters.breadcrumb.crumb2') }}
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-form
      ref="networkParametersForm"
      :model="networkParametersForm"
      :rules="networkParametersFormRules"
      label-width="100px"
      inline
    >
      <el-row class="margin-bottom-row config-row">
        <el-col>
          <el-card>
            <div
              class="card-header-div config-header-div"
            >
              <!--基础配置-->
              {{ $t('message.networkparameters.card1.header') }}
            </div>
            <!--分配方案-->
            <el-form-item
              :label="$t('message.networkparameters.card1.form.label1')"
              prop="assign_algorithm"
            >
              <el-select v-model="networkParametersForm.assign_algorithm">
                <el-option
                  v-for="item in assign_algorithmOption"
                  :key="item.key"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <!--保护带宽-->
            <el-form-item
              :label="$t('message.networkparameters.card1.form.label2')"
              prop="gap"
            >
              <el-input
                class="select-width"
                :maxlength="$store.state.parameters.inputLengthLimit.freq"
                show-word-limit
                v-model.number="networkParametersForm.gap"
              >
                <template slot="append">
                  KHz
                </template>
              </el-input>
            </el-form-item>
            <!--链路余量-->
            <el-form-item
              :label="$t('message.networkparameters.card1.form.label3')"
              prop="link_margin"
            >
              <el-input
                class="input-select-width"
                @blur="networkParametersForm.link_margin = $service.valueControl.linkMarginLimit(networkParametersForm.link_margin)"
                v-model="networkParametersForm.link_margin"
              />
            </el-form-item>
          </el-card>
        </el-col>
      </el-row>
      <el-row class="margin-bottom-row config-row">
        <el-col>
          <el-card>
            <div
              class="card-header-div config-header-div"
              style="float: none"
            >
              <!--轮询-->
              {{ $t('message.networkparameters.card2.header') }}
            </div>
            <!--间隔时间-->
            <el-form-item
              :label="$t('message.networkparameters.card2.form.label1')"
              prop="interval_poll_station"
            >
              <el-input
                class="input-select-width"
                v-model="networkParametersForm.interval_poll_station"
              >
                <template slot="append">
                  S
                </template>
              </el-input>
            </el-form-item>
          </el-card>
        </el-col>
      </el-row>
      <el-row style="text-align: right">
        <el-col>
          <el-button
            v-if="$store.state.is_staff"
            @click="ncpConfigureSubmit"
            type="primary"
          >
            <span style="padding: 0 40px">
              <!--提交-->
              {{ $t('message.networkparameters.submitButtonText') }}
            </span>
          </el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import regExp from '@/service/regExp'
export default {
  name: 'NetworkParameters',
  computed: {
    assign_algorithmOption () {
      return this.$service.getOptionList(this.$t('message.define.assign_algorithm'))
    }
  },
  data () {
    let validateIntervalPollStation = (rule, value, callback) => {
      let ifNumber = /^(-)?\d+(\.\d+)?$/
      if (!value) {
        // 请输入间隔时间
        return callback(new Error(this.$t('message.networkparameters.validate.intervalPollStation.err1')))
      }
      setTimeout(() => {
        if (!ifNumber.test(value)) {
          // 请输入数字值
          callback(new Error(this.$t('message.networkparameters.validate.intervalPollStation.err2')))
        } else {
          if (parseFloat(value) <= 0) {
            // 间隔时间必须大于0
            callback(new Error(this.$t('message.networkparameters.validate.intervalPollStation.err3')))
          } else {
            callback()
          }
        }
      }, 500)
    }
    return {
      loading: true,

      networkParametersForm: {
        id: '',
        assign_algorithm: '',
        gap: '', // 保护带宽
        link_margin: '',
        interval_poll_station: ''
      },
      networkParametersFormRules: {
        assign_algorithm: [
          // 请选择分配方案
          { required: true, message: this.$t('message.networkparameters.validate.networkParameter.err1'), trigger: 'blur' }
        ],
        gap: [
          // 请输入保护带宽
          { required: true, message: this.$t('message.networkparameters.validate.networkParameter.err2'), trigger: 'blur' },
          // 请输入正整数
          { pattern: regExp.positiveInteger, message: this.$t('message.validate.common.integer'), trigger: 'blur' }
        ],
        link_margin: [
          // 请输入链路余量
          { required: true, message: this.$t('message.networkparameters.validate.networkParameter.err3'), trigger: 'blur' },
          // 请输入数字
          { pattern: regExp.float, message: this.$t('message.validate.common.integer'), trigger: 'blur' }
        ],
        interval_poll_station: [
          // 请输入间隔时间
          { required: true, message: this.$t('message.networkparameters.validate.networkParameter.err4'), trigger: 'blur' },
          { validator: validateIntervalPollStation, trigger: 'blur' }
        ]
      }
    }
  },
  mounted () {
    let self = this
    self.$nextTick(() => {
      self.getNcpConfigure()
    })
  },
  methods: {
    async getNcpConfigure () {
      let self = this
      self.loading = true
      let resposne = await self.$store.dispatch('axios', {
        method: 'get',
        url: '/api/abs/ncp/configure/'
      })
      let data = resposne.data[0]
      self.networkParametersForm.id = data.id
      self.networkParametersForm.assign_algorithm = data.assign_algorithm
      self.networkParametersForm.gap = data.gap / 1000
      self.networkParametersForm.link_margin = data.link_margin
      self.networkParametersForm.interval_poll_station = data.interval_poll_station
      self.loading = false
    },
    ncpConfigureSubmit () {
      let self = this
      self.$refs['networkParametersForm'].validate(async valid => {
        if (valid) {
          await self.$store.dispatch('axios', {
            method: 'patch',
            url: `/api/abs/ncp/configure/${self.networkParametersForm.id}/`,
            data: {
              assign_algorithm: self.networkParametersForm.assign_algorithm,
              gap: self.networkParametersForm.gap * 1000,
              link_margin: self.networkParametersForm.link_margin,
              interval_poll_station: self.networkParametersForm.interval_poll_station
            }
          })
          // 修改成功
          self.$message.success(self.$t('message.common.info.modifySuccess'))
          self.getNcpConfigure()
        }
      })
    }
  }
}
</script>

<style scoped>
  .config-row{
    text-align: left;
  }
  .config-header-div{
    float: none;
    margin-bottom: 10px;
  }
</style>
